<template>
	<view class="wrap" :key="currentKey">
		<u-swiper :height="270" :list="imgList" :title="false" @click="imgListClick"></u-swiper>
		<!-- <view class="workbench-title">常用应用</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('/pages/sys/workbench/add-form')" >
					<view class="home-icon icon-color01">
						<i class="iconfont icon-qingjia"></i>
					</view>
					<view class="grid-text">请假申请</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-hetongguanli"></i>
					</view>
					<view class="grid-text">合同申请</view>
				</u-grid-item>
				<u-grid-item :index="2" @click="navTo('')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-chucha"></i>
					</view>
					<view class="grid-text">出差申请</view>
				</u-grid-item>
				<u-grid-item :index="2" @click="navTo('')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-ribao"></i>
					</view>
					<view class="grid-text">日报</view>
				</u-grid-item>
				<u-grid-item  @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-tongzhi"></i>
					</view>
					<view class="grid-text">邮件</view>
				</u-grid-item>
				<u-grid-item  @click="navTo('')">
					<view class="home-icon icon-color05">
						<i class="iconfont icon-huiyishi"></i>
					</view>
					<view class="grid-text">会议室</view>
				</u-grid-item>
				<u-grid-item  @click="navTo('/pages/sys/workbench/install')">
					<view class="home-icon icon-color13">
						<i class="iconfont icon-tianjia" style="color:#90949d;"></i>
					</view>
					<view class="grid-text">添加常用</view>
				</u-grid-item>
			</u-grid>
		</view> -->
		<view class="workbench-title" >内部</view>
		<view class="toolbar" >
			<u-grid class="grid" :col="4" :border="false">
				
				<!-- <u-grid-item v-for="(item,index) in columns" :index="index" :key="index" @click="navTo(`/pages/sys/workbench/${item.url}`)">
					<view :class="`home-icon icon-jiabanshenqing`">
						<i :class="`iconfont ${item.icon}`">{{item.icon}}</i>
					</view>
					<view class="grid-text">{{item.title}}</view>
				</u-grid-item> -->
				<u-grid-item v-if="hasPermi(['mini:mini_program:delivery'])" :index="0" @click="navTo('/pages/sys/workbench/vehicleDispatch')" >
					<view class="home-icon icon-color04">
						<i class="iconfont icon-yongche"></i>
					</view>
					<view class="grid-text">车辆派送</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:process'])" :index="2" @click="navTo('/pages/sys/workbench/processHandover')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-jiabanshenqing"></i>
					</view>
					<view class="grid-text">工序交接</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:install'])" :index="2" @click="navTo('/pages/sys/workbench/installPhoto')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-kaoqinchuqin"></i>
					</view>
					<view class="grid-text">安装拍照</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:measure'])" @click="navTo('/pages/sys/workbench/measure')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-haocaifei"></i>
					</view>
					<view class="grid-text">现场测量</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:see'])" @click="navTo('/pages/sys/workbench/dataBoard')">
					<view class="home-icon icon-color05">
						<i class="iconfont icon-huiyishi"></i>
					</view>
					<view class="grid-text">数据看板</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:sale'])" :index="2" @click="navTo('/pages/sys/workbench/afterSalesProcessing')">
					<view class="home-icon icon-color10">
						<i class="iconfont icon-gongwujiedai"></i>
					</view>
					<view class="grid-text">售后处理</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:materialReceive'])" :index="2" @click="navTo('/pages/sys/workbench/picking')">
					<view class="home-icon icon-color01">
						<i class="iconfont icon-moban"></i>
					</view>
					<view class="grid-text">生产领料</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:materialReturn'])" :index="2" @click="navTo('/pages/sys/workbench/materialReturn')">
					<view class="home-icon icon-color02">
						<i class="iconfont icon-hetongxieyi"></i>
					</view>
					<view class="grid-text">生产退料</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:partsInfo'])" @click="navTo('/pages/sys/workbench/accessoryInfo')">
					<view class="home-icon icon-color01">
						<i class="iconfont icon-tianshenpi"></i>
					</view>
					<view class="grid-text">配件信息</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:stockDeliver'])"  @click="navTo('/pages/sys/workbench/stockDelivery')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-banjieshiwu"></i>
					</view>
					<view class="grid-text">库存发货</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:stockQuery'])"  @click="navTo('/pages/sys/workbench/stockQuery')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-daibanshiwu"></i>
					</view>
					<view class="grid-text">库存查询</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="workbench-title">外部</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item v-if="hasPermi(['mini:mini_program:statement'])" :index="0" @click="navTo('/pages/sys/workbench/financial')" >
					<view class="home-icon icon-color04">
						<i class="iconfont icon-finance"></i>
					</view>
					<view class="grid-text">财务对账</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:orderProcess'])" :index="2" @click="navTo('/pages/sys/workbench/order')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-mall-bag"></i>
					</view>
					<view class="grid-text">订单进度</view>
				</u-grid-item>
				<u-grid-item v-if="hasPermi(['mini:mini_program:afterSale'])" :index="2" @click="navTo('/pages/sys/workbench/afterSales')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-baoxiaodan"></i>
					</view>
					<view class="grid-text">售后帮助</view>
				</u-grid-item>
				<!-- <u-grid-item  @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-shenpi"></i>
					</view>
					<view class="grid-text">用章申请</view>
				</u-grid-item> -->
			</u-grid>
		</view>
		<!-- <u-divider>已经到底了</u-divider> -->
	</view>
	
</template>
<script>
	 import HeadNavBar from '@/components/headnavbar/index';
	 import {mapState} from 'vuex';
	 import {hasPermi} from '@/common/common'
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
	components: {
	  HeadNavBar
	},
	data() {
		return {
			show: false,
			head: '/static/aidex/images/head.png',
			imgList: [
				{image: '/static/aidex/banner/bc1.jpg'},
				{image: '/static/aidex/banner/bc2.jpg'}, 
				{image: '/static/aidex/banner/bc3.jpg'}
			],
			delivery:false,
			production:false,
			design:false,
			parts:false,
			showAll:false,
			todoCount: 3,
			userType:null,
			permissions:[],
			currentKey:'currentKey',//刷新页面用
			columns:[
				{
					title:'车辆派送',
					icon:'icon-yongche',
					icon_color_class:'icon-color04',
					url:'vehicleDispatch',
					permission:['']
				},
				{
					title:'工序交接',
					icon:'icon-jiabanshenqing',
					icon_color_class:'icon-color03',
					url:'processHandover',
					permission:['']
				},
				{
					title:'安装拍照',
					icon:'icon-kaoqinchuqin',
					icon_color_class:'icon-color12',
					url:'installPhoto',
					permission:['']
				},
				{
					title:'现场测量',
					icon:'icon-haocaifei',
					icon_color_class:'icon-color04',
					url:'measure',
					permission:['']
				},
				{
					title:'数据看板',
					icon:'icon-huiyishi',
					icon_color_class:'icon-color05',
					url:'dataBoard',
					permission:['']
				},
				{
					title:'售后处理',
					icon:'icon-gongwujiedai',
					icon_color_class:'icon-color10',
					url:'afterSalesProcessing',
					permission:['']
				},
				{
					title:'生产领料',
					icon:'icon-moban',
					icon_color_class:'icon-color01',
					url:'picking',
					permission:['']
				},
				{
					title:'生产退料',
					icon:'icon-hetongxieyi',
					icon_color_class:'icon-color02',
					url:'materialReturn',
					permission:['']
				},
				{
					title:'库存发货',
					icon:'icon-banjieshiwu',
					icon_color_class:'icon-color04',
					url:'accessoryInfo',
					permission:['']
				},
			]
		};
	},
	computed: {
		...mapState({
			vuex_token:state=>state.vuex_token
		})
	},
	onLoad() {
		var user = uni.getStorageSync('user');
		this.userType = user.userType;
		var rolers =user && user.sysRoles || []
		rolers.forEach((val,index)=>{
			if(val.roleKey && !['psqx','scqx','sjqx','azqx'].includes(val.roleKey)){
				this.delivery=true;
				this.production=true;
				this.design=true;
				this.parts=true;
				this.showAll = true
			}else{
				this.showAll = false;
			}
			if(val.roleKey == 'psqx' || val.roleKey == 'azqx'){
				this.delivery=true;
			}
			if(val.roleKey == 'scqx'){
				this.production=true;
				this.parts=true;
			}
			if(val.roleKey == 'sjqx'){
				this.design=true;
				this.parts=true;
			}
		})
		if(!this.vuex_token){
			this.navTo('/pages/sys/login/index')
		}
	},
	onShow() {
		this.$u.api.getInfo({}).then(result=>{
			if(result.code == 200){
				uni.setStorageSync('permissions', result.permissions || []);
				this.currentKey = (new Date()).getTime()
			}
		})
	},
	methods: {
		hasPermi,
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		imgListClick(index) {
			console.log(`点击了第${index + 1}页图片`)
		},
		itemClick(index) {
			console.log(index);
		}
	}
};
</script>
<style lang="scss">
@import 'index.scss';
.banner-box{
	padding: 0 2%;
	width: 96%;
	height: 170rpx;
	margin: 30rpx 0 30rpx;
}
.u-swiper-wrap{
	padding:0 10px;
}

.banner-pic{
	width: 47%;
	float: left;
	display: inline-block;
	margin: 0 1.5%;
}
.banner-pic image{
	width: 100%;
	height: 170rpx;
	border-radius: 12rpx;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.u-mode-light-info{
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #e9ecf6;
	font-size: 12px;
	padding: 2px 8px;
	position: relative;
	top:-3px;
}
.workbench-title{
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	padding: 15px 30rpx;
}
 .home-icon i.icon-tongzhi{
	font-size: 22px;
 }
</style>
